<template>
  <div>
    <!-- 每一行数据 -->
    <!-- 注意：当进行大数处理以后，在需要使用文章 Id 的地方，要调用大数对象的 .toString() 方法 -->
    <van-cell v-for="item in list" :key="item.art_id.toString()" @click="gotoDetail(item.art_id.toString())">
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{item.title}}</span>
          <!-- 单张图片 -->
          <!-- <img :src="item.cover.images[0]" alt="" v-if="item.cover.type === 1" class="thumb"> -->
          <img v-lazy="item.cover.images[0]" alt="" v-if="item.cover.type === 1" class="thumb">
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box" v-if="item.cover.type > 1">
          <!-- <img v-for="(imgsrc, i) in item.cover.images" :key="i" :src="imgsrc" alt="" class="thumb"> -->
          <img v-for="(imgsrc, i) in item.cover.images" :key="i" v-lazy="imgsrc" alt="" class="thumb">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>{{item.aut_name}}&nbsp;&nbsp;{{item.comm_count}}评论&nbsp;&nbsp;{{item.pubdate | dateFormat}}</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" @click.stop="onCloseClick(item.art_id.toString())" v-if="closable" />
        </div>
      </template>
    </van-cell>

    <!-- 动作面板组件 -->
    <van-action-sheet v-model="show" cancel-text="取消" @closed="onActionSheetClosed">
      <!-- 第一级选项 -->
      <div v-if="isShowFirstPanel">
        <van-cell :title="item.name" v-for="(item, index) in actions" :key="index" title-class="center-title" @click="onCellClick(item)"></van-cell>
      </div>
      <!-- 第二级选项 -->
      <div v-else>
        <van-cell title="返回" title-class="center-title" @click="onGoBack" />
        <van-cell :title="item.label" title-class="center-title" v-for="item in reports" :key="item.value" />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
// 导入可选的二级反馈内容
import reports from '@/api/constant/reports'

// 按需导入 API 接口
import { dislikeArticle } from '@/api/homeAPI'

export default {
  name: 'ArticleList',
  props: {
    // 这是文章的列表数据
    list: {
      // 值类型为 数组
      type: Array,
      // 这个 props 是必填项
      required: true
    },
    // 控制是否展示关闭的小图标
    closable: {
      type: Boolean,
      // 如果值为 true，表示默认展示关闭的小图标
      default: true
    }
  },
  data() {
    return {
      // 是否展示动作面板组件
      show: false,
      // 第一个面板的可选项列表
      actions: [
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      // 是否展示第一级面板
      isShowFirstPanel: true,
      // 二级选项的列表数据
      reports,
      // 要处理的文章的Id
      artId: -1
    }
  },
  methods: {
    // 点击了关闭的按钮
    onCloseClick(artId) {
      // 展示动作面板
      this.show = true
      // 获取文章的 Id
      this.artId = artId
    },
    // 点击了第一级的选项
    async onCellClick(info) {
      if (info.name === '不感兴趣') {
        // TODO：调用接口，将文章设置为不感兴趣
        const { data: res } = await dislikeArticle(this.artId)
        if (res.message === 'OK') {
          // 接口调用成功，炸楼
          this.list.some((item, i) => {
            if (item.art_id.toString() === this.artId) {
              // 删除指定的文章
              this.list.splice(i, 1)
              // 终止后续的循环
              return true
            }
          })
        }
        this.show = false
      } else if (info.name === '拉黑作者') {
        // TODO：调用接口，将文章的作者拉黑
        console.log('拉黑作者')
        this.show = false
      } else if (info.name === '反馈垃圾内容') {
        // TODO：展示二级选项
        this.isShowFirstPanel = false
      }
    },
    // 点击了二级选项中的“返回”
    onGoBack() {
      this.isShowFirstPanel = true
    },
    // 动作面板关闭的事件
    onActionSheetClosed() {
      this.isShowFirstPanel = true
    },
    // 点击文章的 Item 项，跳转到文章详情页面
    gotoDetail(id) {
      // 调用编程式导航 API 跳转到详情页
      this.$router.push('/article/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}

.center-title {
  text-align: center;
}
</style>
